<template>
    <div id="comment">
        <quillEditor id="abc" ref="text" v-model="content" class="myQuillEditor" :options="editorOption"></quillEditor>
            <div @click="submit">提交</div>
        <div id="ccdd"></div>
        <div id="qt" @click="getcomment">显示评论</div>
        <div id="ab" ></div>
    </div>
</template>

<script>
    import { Quill,quillEditor } from 'vue-quill-editor';

    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import axios from 'axios';
    //
    // import quillEmoji from 'quill-emoji';
    // import 'quill-emoji/dist/quill-emoji.css'
    // Quill.register('modules/quillEmoji', quillEmoji);


    // import quillBetterTable from 'quill-better-table';
    // Quill.register('modules/better-table',quillBetterTable);
    class Counter{
        constructor(quill,options){
            // console.log('quill: ',quill)
            // console.log('options: ',options)
            this.container=quill.addContainer('q1-counter');
            quill.on(Quill.events.TEXT_CHANGE,()=>{
                const text=quill.getText();
                const char=text.replace(/\s/g,'');
                this.container.innerHTML=`当前字数：${char.length}`;
            })
        }
    }
    Quill.register('modules/counter',Counter)





    const toolbarOptions= [
        ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
        ['blockquote', 'code-block'],  //引用，代码块


        [{ 'header': 1 }, { 'header': 2 }],  // 标题，键值对的形式；1、2表示字体大小
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],  //列表
        [{ 'script': 'sub'}, { 'script': 'super' }], // 上下标
        [{ 'indent': '-1'}, { 'indent': '+1' }],  // 缩进
        [{ 'direction': 'rtl' }],    // 文本方向

        [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  //几级标题


        [{ 'color': [] }, { 'background': [] }],  // 字体颜色，字体背景颜色
        [{ 'font': [] }],  //字体
        [{ 'align': [] }], //对齐方式


        ['clean'], //清除字体样式
        ['image','video'], //上传图片、上传视频,
        // [
        //     {'table': 'TD'},
        // ]

    ];


    export default {
        name: "Comment",
        components:{
            quillEditor
        },
        data(){
            return{
                content:'',
                editorOption:{
                    theme: 'snow',
                    modules: {
                        toolbar:{
                            container:toolbarOptions,
                            handlers:{
                            }
                        },
                        counter:true
                    }
                },
                comment:{
                    name:"jj",
                    ip:"2.2.2.2",
                    content:"",
                    time:""

                }
            }
        },
        methods:{
            getcomment(){
                axios({
                    method:'get',
                    url:"http://localhost:8085/comment/get/16"
                }).then(res=>{
                    console.log(res);
                    document.getElementById("ab").innerHTML=res.data.content;
                })
            },
            submit(){
                var tt=this.$refs.text.value;
                console.log(tt);
                this.comment.content=tt;
                this.comment.time=new Date().getTime()+"";
                // axios.post("http://localhost:8085/comment/insert")
                // // document.getElementById("ccdd").innerHTML=tt;
                axios({
                    method:'post',
                    url:"http://localhost:8085/comment/insert",
                    data:this.comment
                }).then(res=>{
                    console.log(res)
                })
            }
        }
    }
</script>

<style scoped>

    #abc{
        background-color: pink;
        /*width: 60vw;*/
    }
</style>